Recently I had an opportunity to work on a Flutter application using the Dart programming language.

One of the most confusing things in Dart is asynchronous programming. In Swift, we only have async and await, but in Dart (and probably other languages), we also have a Future (or Promise) object.

A combination of a Future, async, and await is quite error-prone and confusing for me.

In this article, I will show you a series of asynchronous implementations, highlight pitfalls and give a usage summary of the three components (Future, async, and await) at the end.

Here is the summary if you are in a hurry.

A Future is an object that represents the result of an asynchronous operation and can have two states: uncompleted or completed.

I won't go into the detail of the uncompleted case in this article.

This is the indicator that we use to identify asynchronous operations in Dart. An asynchronous function is a function that returns Future.

Note that we don't need to use async here to represent an asynchronous function.

You can easily support sarunw.com by checking out this sponsor.

Translate your app In 1 click: Simplifies app localization and helps you reach more users.

async and await are keywords that provide a way to make asynchronous operations appear synchronous.

To understand this, let's see how we deal with asynchronous operation results with a callback.

We use a then method to handle the future value, which accepts a callback parameter that gets called when the future completes.

In the following example, we get forecase result and print the value out in the callback.

Here is the result:

You can see that the code is quite hard to predict. Every print statement shows up not in the order it was defined.

Let's see how async and await can help us on this.

async has only two functions.

You can declare an async function by adding an async keyword before the function body.

1 We don't need to explicitly return Future.value(1) here since async does the wrapping.

If you try to remove the async keyword, you will get the following error.

A value of type 'int' can't be returned from the function 'futureInt' because it has a return type of 'Future'

Please note that async function is different meaning from asynchronous function that we talked earlier.

You can declare a synchronous function with async without an error.

An async keyword would try to help you turn your function into asynchronous most of the time by enforcing the return type of your function to Future.

You will get the following error if the return type is not Future.

Functions marked 'async' must have a return type assignable to 'Future'. Try fixing the return type of the function, or removing the modifier 'async' from the function body.

But if the return type is void, the async keyword won't save you from that.

The following code works without any error.

The above code would be treated as a synchronous function even with the async keyword. I don't know if this is a bug or if there is any wisdom behind it, but I think you should be aware of this.

In summary, the async keyword doesn't mean an asynchronous function.

You can think of await as a syntactic sugar of then. It makes asynchronous operations look synchronous.

await will wait for a future to complete before executing the subsequence statement. This makes asynchronous operations appear to be synchronous.

Let's modify fetchWeatherForecast to use `async/await.

Here is our current implementation.

Here is the implementation with async/await.

1 We make fetchWeatherForecast support await by adding the async keyword. 2 The we wait for the result from getWeatherForecast() by using await. 3 This line won't executed until we get a result from getWeatherForecast().

Here is the result:

As you can see, both fetchWeatherForecast: Partly cloudy and end: fetchWeatherForecast print after final forecast = await getWeatherForecast(); is finished.

The output of the two methods is different. The then method prints end: fetchWeatherForecast immediately after start: fetchWeatherForecast.

Since async/await is just syntactic sugar, we can modify it a bit to give the same output result.

1 We move print("end: fetchWeatherForecast") into the success callback.

You can think of any statements after await as statements within a callback in then.

I intentionally did not put await before fetchWeatherForecast() in the main function to show that async/await is equivalent to then method.

You can make everything executed in order by adding async to main and await for fetchWeatherForecast().

Which will print the following message.

You can easily support sarunw.com by checking out this sponsor.

Translate your app In 1 click: Simplifies app localization and helps you reach more users.

Here is my summary of asynchronous programming in Dart.

I think that's all you need to know about asynchronous programming in Dart.

You may also like

If you enjoy this article, you can subscribe to the weekly newsletter.Every Friday, you'll get a quick recap of all articles and tips posted on this site. No strings attached. Unsubscribe anytime.

Feel free to follow me on Twitter and ask your questions related to this post. Thanks for reading and see you next time.

If you enjoy my writing, please check out my Patreon https://www.patreon.com/sarunw and become my supporter. Sharing the article is also greatly appreciated.

Type placeholders allow us to write a type placeholder (_) in a place where type is expected. A compiler will automatically infer the type of that placeholder. But what is the benefit of it? Let's find out.

Every year Apple introduces new features to the system, and sometimes they have to deprecate some old APIs to make room for the new ones. Change is an inevitable thing in programming. Let's learn how to handle the changes.

← Home